<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>04_jQuery对象</title>
</head>

<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   需求1. 统计一共有多少个按钮
   需求2. 取出第2个button的文本
   需求3. 输出所有button标签的文本
   需求4. 输出'测试三'按钮是所有按钮中的第几个
   */

  $(function () {
    // 需求1. 统计一共有多少个按钮
    var $buttons = $('button')
    // size()/length: 包含的DOM元素个数
    console.log($buttons.size(),$buttons.length)
    // 需求2. 取出第2个button的文本
    // [index]/get(index): 得到对应位置的DOM元素
    console.log($buttons[1].innerHTML,$buttons.get(1).innerHTML)
    // 需求3. 输出所有button标签的文本
    // each(): 遍历包含的所有DOM元素   this就是ele
    $buttons.each(function (index, ele ) {
      console.log(index + ":" + ele.innerHTML,this)
    })
    // 需求4. 输出'测试三'按钮是所有按钮中的第几个
    // index(): 得到在所在兄弟元素中的下标
    console.log($("#btn3").index())

    //伪数组不是数组
    console.log($buttons instanceof Array)//false
    console.log($buttons.forEach)//undefined
    var fakeArray = {}
    fakeArray.length = 0
    fakeArray[fakeArray.length] = 33
    fakeArray.length++
    fakeArray[fakeArray.length] = 44
    fakeArray.length++
    console.log('数组的长度是'+fakeArray.length)
    for (let i = 0; i < fakeArray.length; i++) {
      console.log(i + ":" + fakeArray[i])
    }
  })

</script>
</body>
</html>